<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- <div id="message"></div> -->
    <!-- <div id="back"></div> -->
    <!-- built files will be auto injected -->
    <script>
      // SPA 可以帮助我们在不刷新页面的前提下动态改变浏览器地址栏中的URL地址，动态修改页面上所显示资源
      // SPA 的优点
      // 1. 速度快，第一次下载完成静态文件，跳转不需要再次下载静态文件
      // 2. 体验号，整个交互趋于无缝，更倾向于原生应用
      // 为前后端分离提供了实践场所

      // 状态管理工具
      // 设计理念
      //   一个累死 object 的全局数据结构，被称之为 store
      //   只能调用特定的方法完成数据的修改
      // 每一个 Vuex 应用的核心就是 store（仓库）。store 基本上就是一个容器，它包含你的应用中大部分的状态（state）
      // Vuex 和单纯的全局对象有什么区别
      //   Vuex 的状态存储是响应式的，当 Vue 组件 从 store 中读取状态的时候，如果 store 中的状态发生改变，那么相应的组件也会得到高效的更新。
      //   你不能直接更改 store 中的状态。改变 store 中的状态唯一的途径就是显式的提交(commit) mutation。这样使得我们可以更好的去跟踪每一个状态的变化

      // RESTful API 是目前比较成熟的一套互联网应用程序的API设计理论
      // RESTful 架构中，每一个网址代表一种资源(resource)，所以网址中不能有动词，只能有名词，
      // 而且所用的名词往往是和数据库的表格名对应，一般来说，数据库中的表都是同种记录的集合
      // https://api.examples.com/tems  https://api.examples.com/players

      // Verb 动词
      // GET (SELECT): 从服务器取出资源
      // POST (CREATE)
      // PUT (UPDATE)
      // PATCH (UPDATE)
      // DELETE (DELETE)

      // 常见的状态码
      // 200 OK [get]: 服务器成功返回用户请求的数据
      // 201 CREATED - [post/put/patch] :用户新建或者修改数据成功
      // 204 NO CONTENT [DELETE] : 用户删除数据成功
      // 401 Unauthorized : 表示用户没有权限
      // 403 Forbidden : 表示用户得到授权，但是访问是被禁止的
      // 404 NOT FOUND : 用户发出的请求针对的是不存在的记录，服务器没有进行操作

      // 关于 POST encType 的描述 

      // 
    </script>
  </body>
</html>
